<script setup>
import { ref } from "vue";
import { VueUiChestnut } from "vue-data-ui";
import "vue-data-ui/style.css";
import Api from "@/api/backend/api";
import XEUtils from "xe-utils";
const newiestData=ref([])

const datetime = ref(XEUtils.toDateString(new Date(), `yyyy-MM-dd HH:mm:ss`));
newiestData.value = await Api.stockController.newiestStock();
const transLiveData = computed(() => {
  return newiestData.value.map((item) => {
    return {
      name: item.product_name,
      color: `${getRandomColor()}`,
      value: [item.net_qty],
      children: [],
    };
  });
}, [newiestData]);

function getRandomColor() {
  // 生成0到255之间的随机整数
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  // 生成0到1之间的随机浮点数作为透明度
  var a = Math.random().toFixed(2); // 保留两位小数

  // 返回rgba格式的颜色字符串
  return `rgba(${r},${g},${b},${a})`;
}

const config = ref({
  responsive: false,
  theme: "",
  customPalette: [],
  useCssAnimation: true,
  style: {
    fontFamily: "inherit",
    chart: {
      backgroundColor: "#FFFFFF",
      color: "#1A1A1A",
      layout: {
        bars: {
          sort: "desc",
          useStroke: false,
          strokeWidth: 2,
          height: 32,
          gap: 6,
          borderRadius: 4,
          offsetX: 64,
          paddingRight: 0,
          useGradient: true,
          gradientIntensity: 20,
          fillOpacity: 90,
          underlayerColor: "#FFFFFF",
          dataLabels: {
            color: "#1A1A1A",
            bold: true,
            fontSize: 12,
            value: {
              show: true,
              roundingValue: 0,
              prefix: "",
              suffix: "",
              formatter: null,
            },
            percentage: {
              show: true,
              roundingPercentage: 0,
            },
            offsetX: 0,
          },
          nameLabels: {
            show: true,
            color: "#1A1A1A",
            bold: false,
            fontSize: 10,
            offsetX: 0,
          },
          parentLabels: {
            show: true,
            color: "#1A1A1A",
            bold: false,
            fontSize: 10,
            offsetX: 0,
          },
        },
        highlighter: {
          color: "#1A1A1A",
          opacity: 5,
        },
        separators: {
          show: true,
          color: "#e1e5e8",
          strokeWidth: 1,
        },
      },
      title: {
        text: "Title",
        color: "#1A1A1A",
        fontSize: 20,
        bold: true,
        textAlign: "center",
        paddingLeft: 0,
        paddingRight: 0,
        subtitle: {
          color: "#A1A1A1",
          text: "",
          fontSize: 16,
          bold: false,
        },
      },
      legend: {
        show: true,
        bold: true,
        backgroundColor: "#FFFFFF",
        color: "#1A1A1A",
        fontSize: 14,
        position: "top",
        roundingValue: 0,
        roundingPercentage: 0,
        prefix: "",
        suffix: "",
      },
      tooltip: {
        show: true,
        color: "#1A1A1A",
        backgroundColor: "#FFFFFF",
        fontSize: 14,
        customFormat: null,
        borderRadius: 4,
        borderColor: "#e1e5e8",
        borderWidth: 1,
        backgroundOpacity: 100,
        position: "center",
        offsetY: 24,
        showValue: true,
        showPercentage: true,
        roundingValue: 0,
        roundingPercentage: 0,
        prefix: "",
        suffix: "",
      },
    },
  },
  userOptions: {
    show: true,
    buttons: {
      tooltip: true,
      pdf: true,
      csv: true,
      img: true,
      table: true,
      labels: false,
      fullscreen: true,
      sort: true,
      stack: false,
      animation: false,
    },
    buttonTitles: {
      open: "Open options",
      close: "Close options",
      tooltip: "Toggle tooltip",
      pdf: "Download PDF",
      csv: "Download CSV",
      img: "Download PNG",
      table: "Toggle table",
      fullscreen: "Toggle fullscreen",
      sort: "Toggle sort",
    },
  },
  table: {
    show: false,
    responsiveBreakpoint: 400,
    th: {
      backgroundColor: "#FFFFFF",
      color: "#1A1A1A",
      outline: "none",
    },
    td: {
      backgroundColor: "#FFFFFF",
      color: "#1A1A1A",
      outline: "none",
      roundingValue: 0,
      roundingPercentage: 0,
      prefix: "",
      suffix: "",
    },
  },
  translations: {
    parentName: "Group",
    childName: "Serie",
    value: "Value",
    percentageToTotal: "% / total",
    percentageToSerie: "% / group",
  },
});

const dataset = ref([
  {
    name: "Serie 1",
    value: 100,
    color: "#42d392",
    children: [],
  },
  {
    name: "Serie 2",
    value: 66.4,
    color: "#6376DD",
    children: [],
  },
  {
    name: "Serie 3",
    value: 33.6,
    color: "#ff6400",
    children: [],
  },
]);
</script>

<template>
  <div style="width: 600px">
    <VueUiChestnut :config="config" :dataset="dataset" />
  </div>
</template>
